
<template>
  <view class="example-body">

    <view class="upload" v-if="!videoinfo.url">
      <image src="/static/photo.png" @click="selectVideo"></image>

      <view @click="selectVideo">上传视频</view>
    </view>



    <view v-if="videoinfo.url" class="example-body">
      <video  :src="videoinfo.url"></video>
      <view>

        <view class="info">
          <text class="title">视频大小：</text>
          <text class="desc">{{(videoinfo.size/1024/1024).toFixed(1)}}MB</text>
        </view>
        <view class="info">
          <text class="title">修改前的md5：</text>
          <text class="desc">{{videoinfo.md5}}</text>
        </view>
        <view class="info">
          <text class="title">修改后的md5：</text>
          <text class="desc">{{videoinfo.md5_xiugai}}</text>
        </view>

        <view class="opt">
          <view @click="clear" class="smallBtn bg2">
            清空内容
          </view>
          <view @click="saveVideo" class="smallBtn bg1" v-if="videoinfo.url_chuli">
            保存视频
          </view>
        </view>
      </view>
    </view>


    <view class="link" @click="showInfo">
      修改md5可以干嘛？
    </view>

  </view>
</template>
<script setup>

import {ref} from 'vue';
let videoinfo = ref({})

function showInfo(){
  uni.showModal({
    showCancel:false,
    content:"有效检测视频唯一性，防短视频平台重复检测，达到原创效果"

  })

}

function clear(){

  uni.hideLoading();
  videoinfo.value.url = undefined;
  videoinfo.value.url_chuli = undefined;
}
function selectVideo(e){
  uni.chooseVideo({
    sourceType: [ 'album'],
    compressed:false,
    success: function (res) {
      let tempinfo = res.tempFilePath;


      videoinfo.value.url = tempinfo;
      uni.getFileInfo({
        digestAlgorithm:'md5',
        filePath:tempinfo,
        success(options) {
          videoinfo.value.md5 = options.digest;
          videoinfo.value.size = options.size;

          uni.showLoading({
            title: '修改中',

          });

          const mediaContainer = wx.createMediaContainer();


          mediaContainer.extractDataSource({
            source: tempinfo,
            success: (res) => {
              const b = res.tracks;
              mediaContainer.addTrack(b[0]);
              mediaContainer.addTrack(b[1]);

              mediaContainer.export({
                success: (result) => {
                  mediaContainer.destroy()
                  uni.hideLoading()
                  // 拿到导出之后的视频
                  console.log(result.tempFilePath);
                  videoinfo.value.url_chuli= result.tempFilePath
                  uni.getFileInfo({
                    digestAlgorithm:'md5',
                    filePath:result.tempFilePath,
                    success(options) {
                      videoinfo.value.md5_xiugai = options.digest;
                      videoinfo.value.size = options.size;
                    }
                  })
                },
              });
            }
          })



        }
      })
    }
  });

}


function saveVideo(){

  // 保存图片到相册
  wx.getSetting({
    success(res) {
      console.log(res);
      if (!res.authSetting['scope.writePhotosAlbum']) {
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            wx.saveVideoToPhotosAlbum({
              filePath: videoinfo.value.url_chuli,
              success: function () {


                uni.showToast({
                  title: '保存视频成功',
                  duration: 2000
                });
              },
              fail: function (error) {
                console.log(error);
                uni.showModal({
                  content: '保存视频失败'+videoinfo.value.url_chuli,
                  duration: 2000
                });
                console.error('保存到相册失败', error);
              }
            });
          }
        })
      } else {
        wx.saveVideoToPhotosAlbum({
          filePath: videoinfo.value.url_chuli,
          success: function () {


            uni.showToast({
              title: '保存视频成功',
              duration: 2000
            });
          },
          fail: function (error) {
            console.log(error);
            uni.showModal({
              content: '保存视频失败'+videoinfo.value.url_chuli,
              duration: 2000
            });
            console.error('保存到相册失败', error);
          }
        });

      }
    }
  })



}
</script>

<style scoped lang="less">
@main-color: #17DC73;
.upload{
  width: 700rpx;
  height: 650rpx;
  border-radius: 50rpx;
  margin:0 auto;
  box-shadow: 1px 1px 13rpx #eee;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  view{
    padding-top: 30rpx;
    padding-bottom: 40rpx;

  }
  image{
    width: 150rpx;
    height:150rpx;

  }

}
.example-body{
  width: 750rpx;

  box-sizing: border-box;

}
video{
  width: 700rpx;
  margin: 0 auto;
  margin-top: 30rpx;


}
.opt{
  display: flex;
  justify-content: space-between;
  width:700rpx;
  margin:0 auto;
  margin-top: 50rpx;

}
.info{
  font-size: 25rpx;
  .title{
    font-weight: bold;

  }
}

.smallBtn {
  width: 325rpx;
  background-color: @main-color;
  font-size: 25rpx;
  color: #fff;
  margin:0;
  height:60rpx;
  line-height: 60rpx;
  border-radius: 5rpx;
  text-align: center;
}
.bg1 {
  background-color: #1783dc;
}

.bg2 {
  background-color: #1783dcaa;
}
.link{
  margin-top: 50rpx;
  text-align: center;
  color: #1783dc;
  text-decoration: underline;
}
</style>
